<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>服务创建</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" type="text/css" href="../../css/iconfont.css"/>
	<link rel="stylesheet" type="text/css" href="../../layui/css/layui.css"/>
	<style type="text/css">
		body {
			overflow-y: scroll;
		}

		.demoTable {
			width: 80%;
			height: 50px;
			margin: 0 auto;
			text-align: center
		}
	</style>
</head>
<body style="margin: 20px;">

<div class="demoTable">
	搜索客户：
	<div class="layui-inline">
		<input class="layui-input" name="id" id="demoReload" autocomplete="off">
	</div>
	<button class="layui-btn layui-btn-sm layui-bg-blue" data-type="reload">搜索</button>

</div>

<table class="layui-hide" id="cusService" lay-filter="cusService"></table>

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="getCheckData">删除选中</button>
		<button class="layui-btn layui-btn-sm layui-bg-blue btn" lay-event="add">添加</button>
		<!--<button class="layui-btn layui-btn-sm layui-bg-blue btn" lay-event="findAll" onclick="history.go(0)">查看全部信息</button>-->
		<button class="layui-inline layui-btn layui-btn-primary layui-btn-sm btn" lay-event="refresh"
				onclick="history.go(0)" style="width: 30px;height: 30px">
			<i class="layui-icon layui-icon-refresh-3" style="color: #0000FF;padding: 3px 0 0 1px"></i></button>
	</div>
</script>

<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="order">生成订单</a>
	<a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="../../layui/layui.js" charset="utf-8"></script>
<script src="../../js/jquery3.js" type="text/javascript" charset="utf-8"></script>

<script>
	layui.use('table', function () {
		var table = layui.table;
		table.render({
			elem: '#cusService'
			, url: 'http://localhost:8080/crm/cusService/findAll'
			, toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
			, height: 450
			, defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
				title: '提示'
				, layEvent: 'LAYTABLE_TIPS'
				, icon: 'layui-icon-tips'
			}]
			, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
			,cols: [[
				{type:'checkbox'}
				,{field: 'id', title: '编号' , sort: true}
				,{field: 'serviceType', title: '服务类型'}
				,{field: 'outline', title: '概要'}
				,{field: 'cusId', title: '客户编号',}
				,{field: 'state', title: '服务状态', sort: true, }
				,{field: 'request', title: '服务请求', sort: true,}
				,{field: 'createPeople', title: '服务创建人', sort: true}
				,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:180}
			]]
			, id: 'testReload'
			, page: true
			, done: function (res, curr, count, status) {
				layer.msg("操作成功，共查询到 " + count + " 个用户信息");
			}
		});


		//查找id
		var active = {
			reload: function () {
				var demoReload = $('#demoReload');

				//执行重载
				table.reload('testReload', {
					page: {
						curr: 1 //重新从第 1 页开始
					}
					, where: {
						key: demoReload.val()
					}
				}, 'data');
			}
		};

		$('.demoTable .layui-btn').on('click', function () {
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		})

		//回车键搜索
		$('#demoReload').on('keypress',function () {
			var type = $('.demoTable .layui-btn').data('type');
			active[type] ? active[type].call(this) : '';
		})


		// 头工具栏事件
		table.on('toolbar(cusService)', function (obj) {
			var checkStatus = table.checkStatus(obj.config.id);
			// console.log("checkStatus---"+checkStatus);
			switch (obj.event) {
					//删除选中数据
				case 'getCheckData':
					var data = checkStatus.data;
					console.log(data)
					// layer.alert(JSON.stringify(data));
					layer.confirm('确认删除该行吗？', function (index) {
						// obj.del();
						layer.close(index);
						//向后台发送ajax请求
						$.ajax({
							//编写json格式，设置属性和值
							url: "http://localhost:8080/crm/cusService/deleteMany",
							contentType: "application/json;charset=utf-8",
							data:JSON.stringify(data),
							dataType: "json",
							type: "post",
							success: function (data) {
								//服务器端成功响应的json数据，进行解析
							}
						})
						// 刷新
						location.reload();
					});
					break;
				case 'getCheckLength':
					var data = checkStatus.data;
					layer.msg('选中了：' + data.length + ' 个');
					break;
				case 'isAll':
					layer.msg(checkStatus.isAll ? '全选' : '未全选');
					break;
					//添加
				case 'add':
					layer.open({
						type: 2,
						title: '<h1 style="font-size: 25px;text-align: center">添加服务</h1>',
						shadeClose: true,
						shade: 0.6,
						area: ['600px', '73%'],
						shadowColor: false,
						content: 'EstablishForm.html',
					});
					break;
				case 'refresh':
					$(".layui-laypage-btn").click();
					break;
					//自定义头工具栏右侧图标 - 提示
				case 'LAYTABLE_TIPS':
					layer.alert('这是工具栏右侧自定义的一个图标按钮');
					break;
			}
			;
		});

		//监听行工具事件
		table.on('tool(cusService)', function (obj) {
			var data = obj.data;
			console.log("data.id--"+data.id)
			if (obj.event === 'del') {
				console.log("操作：" + obj.event);
				layer.confirm('真的删除行么', function (index) {
					obj.del();
					layer.close(index);
					//向后台发送ajax请求
					$.ajax({
						//编写json格式，设置属性和值
						url: "http://localhost:8080/crm/cusService/delete?id=" + data.id,
						contentType: "application/json;charset=utf-8",
						dataType: "json",
						type: "post",
						success: function (data) {
							//服务器端成功响应的json数据，进行解析
						}
					})
				});
			} else if (obj.event === 'edit') {
				console.log("操作：" + obj.event);
				layer.open({
					type: 2,
					title: '<h1 style="font-size: 25px;text-align: center">编辑服务</h1>',
					shadeClose: true,
					shade: 0.6,
					area: ['600px', '73%'],
					shadowColor: false,
					content: 'EstablishForm.html',
					success: function (layero, index) {
						//方法一：body.html() body里面的内容
						var body = layer.getChildFrame('body', index);
						body.find('[name="serviceType"]').val(data.serviceType);

						body.find('#outline').val(data.outline);
						body.find('#cusId').val(data.cusId);
						body.find('#state').val(data.state);
						body.find('#request').val(data.request);
						body.find('#createPeople').val(data.createPeople);
						//给id赋值
						body.find('#id').val(data.id);
					}
				});
			} else if (obj.event === 'order') {
				console.log("操作：" + obj.event);
				layer.open({
					type: 2,
					title: '<h1 style="font-size: 25px;text-align: center">生成订单</h1>',
					shadeClose: true,
					shade: 0.6,
					area: ['600px', '73%'],
					shadowColor: false,
					content: 'CustomerOrderForm.html',
					success: function (layero, index) {
						//方法一：body.html() body里面的内容
						var body = layer.getChildFrame('body', index);
						var a = body.find('#cusId').val(data.cusId);
						console.log("id"+a);
					},
				});
			}
		});
	});
</script>

</body>
</html>
